<template>
    <div>
        <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
            background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" router :collapse="isCollapse">
            <h3>{{ isCollapse ? "后台" : "后台管理系统" }}</h3>
            <el-menu-item :index="item.path" v-for="item in noChildren" :key="item.name" @click="clickMenu(item)">
                <i :class="`el-icon-${item.icon}`"></i>
                <span slot="title">{{ item.label }}</span>
            </el-menu-item>
            <el-submenu :index="item.label" v-for="item in hasChildren" :key="item.label">
                <template slot="title">
                    <i :class="`el-icon-${item.icon}`"></i>
                    <span>{{ item.label }}</span>
                </template>
                <el-menu-item-group v-for="subItem in item.children" :key="subItem.name">
                    <el-menu-item :index="subItem.path">{{ subItem.label }}</el-menu-item>
                </el-menu-item-group>
            </el-submenu>

        </el-menu>
    </div>
</template>

<script>
import Cookie from "js-cookie";
import { mapState, mapMutations } from "vuex";
export default {
    data() {
        return {
        }
    },
    methods: {
        ...mapMutations('tab', ['selectMenu']),
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        // 点击菜单
        clickMenu(item) {
            // console.log("item", item);
            this.selectMenu(item)
        }
    },
    computed: {
        ...mapState("tab", ["isCollapse", 'menu']),
        // 没有子菜单
        noChildren() {
            return this.menuData.filter(item => !item.children)
        },
        // 有子菜单
        hasChildren() {
            return this.menuData.filter(item => item.children)
        },
        menuData() {
            // 判断当前数据，如果缓冲中没有，当前store中获取
            return JSON.parse(Cookie.get("menu")) || this.menu
        }
    }
}
</script>

<style lang="less" scoped>
.el-menu {
    height: 100vh;
}

h3 {
    color: #fff;
    padding: 0 20px;
    line-height: 56px;
}
</style>